<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户主界面</title>
    <link rel="stylesheet" th:href="@{/css/style.css}" href="css/style.css" />
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html, body, #container {
            height: 100%;
        }
        /*.info {*/
        /*    width: 26rem;*/
        /*}*/
        .current-location {
            height: 400px; /* 设置地图容器的高度 */
        }
    </style>
</head>

<body>




<div class="wrapper">
    <div class="reservation-form">

        <div class="current-location">
            <div id="container"></div>
        </div>
        <h2>预约报价</h2>
        <form th:action="@{/submitQuote}" method="post">
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" required>

            <label for="contact">联系方式（电话）:</label>
            <input type="tel" id="contact" name="contact" required>

            <label for="origin">出发地点:</label>
            <input type="text" id="origin" name="origin">

            <label for="destination">目的地点:</label>
            <input type="text" id="destination" name="destination">
            <select name="commonDestinations">
                <!-- 快速选择常用目的地选项 -->
                <option value="destination1">目的地1</option>
                <option value="destination2">目的地2</option>
                <!-- 更多选项 -->
            </select>

            <label for="travelTime">预定出行时间:</label>
            <input type="datetime-local" id="travelTime" name="travelTime" required>

            <label for="numOfPeople">出行人数:</label>
            <input type="number" id="numOfPeople" name="numOfPeople" required>
            <!-- 请选择服务类型 -->
            <label for="serviceType">请选择服务类型：</label>
            <select id="serviceType" name="serviceType">
                <option value="airport">机场接送</option>
                <option value="urban">室内点到点接送</option>
                <option value="intercity">城际点到点接送</option>
            </select>

            <!-- 备注 -->
            <label for="remarks">备注：</label>
            <textarea id="remarks" name="remarks" rows="4" cols="50"></textarea>
            <button type="submit">提交</button>
        </form>
        <!--    <div id="estimatedPrice">-->
        <!--        &lt;!&ndash; 预估价格显示 &ndash;&gt;-->
        <!--        <p>预估价格: <span>[价格]</span></p>-->
        <!--    </div>-->
        <!--    <div class="prt-diagram">-->
        <!--        &lt;!&ndash; PRT示意图 &ndash;&gt;-->
        <!--        <img src="/images/1.png" alt="PRT Diagram"/>-->
        <!--    </div>-->

    </div>
    <div class="navbar">
        <!-- 导航栏内容 -->
        <nav class="navbar">
            <ul class="nav-list">
                <li class="nav-item active"><a th:href="@{/prt/index}">首页</a></li>
                <li class="nav-item"><a th:href="@{/prt/booking_guide}">预订指南</a></li>
                <li class="nav-item"><a th:href="@{/prt/online_booking}">在线预订</a></li>
                <li class="nav-item"><a th:href="@{/prt/profile}">我</a></li>
            </ul>
        </nav>
    </div>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=1869d3c6fca1a95eb881fe32c3b3a8b2"></script>
<script type="text/javascript">
    var map = new AMap.Map('container', {
        resizeEnable: true
    });
    AMap.plugin('AMap.Geolocation', function() {
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：5s
            position:'RB',    //定位按钮的停靠位置
            offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
            zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function(status,result){
            if(status=='complete'){
                onComplete(result)
            }else{
                onError(result)
            }
        });
    });
    //解析定位结果
    function onComplete(data) {
        document.getElementById('status').innerHTML='定位成功'
        var str = [];
        str.push('定位结果：' + data.position);
        str.push('定位类别：' + data.location_type);
        if(data.accuracy){
            str.push('精度：' + data.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
        document.getElementById('result').innerHTML = str.join('<br>');
    }
    //解析定位错误信息
    function onError(data) {
        document.getElementById('status').innerHTML='定位失败'
        document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message+'</br>浏览器返回信息：'+data.originMessage;
    }
</script>
</body>
</html>
